<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Nav</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-tab-item layui-show site-demo">
        <div class="layui-main" style="margin-top: 20px">

            <ul class="layui-nav">
                <li class="layui-nav-item"><a href="">最新活动</a></li>
                <li class="layui-nav-item layui-this">
                    <a href="javascript:;">产品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">选项1</a></dd>
                        <dd><a href="javascript:;">选项2</a></dd>
                        <dd><a href="">选项3</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">大数据<span class="layui-badge-dot"></span></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">移动模块</a></dd>
                        <dd class="layui-this"><a href="">后台模版</a></dd>
                        <dd><a href="">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">社区</a></li>
                <li class="layui-nav-item">
                    <a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
                </li>
            </ul>

            <br>

            <ul class="layui-nav layui-bg-cyan">
                <li class="layui-nav-item"><a href="">最新活动</a></li>
                <li class="layui-nav-item layui-this">
                    <a href="javascript:;">产品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">选项1</a></dd>
                        <dd><a href="">选项2</a></dd>
                        <dd><a href="">选项3</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">移动模块</a></dd>
                        <dd class="layui-this"><a href="">后台模版</a></dd>
                        <dd><a href="">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>

            <br>

            <ul class="layui-nav layui-bg-green">
                <li class="layui-nav-item"><a href="">最新活动</a></li>
                <li class="layui-nav-item layui-this">
                    <a href="javascript:;">产品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">选项1</a></dd>
                        <dd><a href="">选项2</a></dd>
                        <dd><a href="">选项3</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">移动模块</a></dd>
                        <dd class="layui-this"><a href="">后台模版</a></dd>
                        <dd><a href="">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>

            <br>

            <ul class="layui-nav layui-bg-blue">
                <li class="layui-nav-item"><a href="">最新活动</a></li>
                <li class="layui-nav-item layui-this">
                    <a href="javascript:;">产品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">选项1</a></dd>
                        <dd><a href="">选项2</a></dd>
                        <dd><a href="">选项3</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">移动模块</a></dd>
                        <dd class="layui-this"><a href="">后台模版</a></dd>
                        <dd><a href="">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>

            <br><br>

            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">产品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">移动模块</a></dd>
                        <dd><a href="javascript:;">后台模版</a></dd>
                        <dd><a href="javascript:;">电商平台</a></dd>
                        <dd><a href="">跳转菜单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">移动模块</a></dd>
                        <dd><a href="javascript:;">后台模版</a></dd>
                        <dd><a href="">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>

            <br><br>

            <ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">产品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">移动模块</a></dd>
                        <dd><a href="javascript:;">后台模版</a></dd>
                        <dd><a href="javascript:;">电商平台</a></dd>
                        <dd><a href="">跳转菜单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">移动模块</a></dd>
                        <dd><a href="javascript:;">后台模版</a></dd>
                        <dd><a href="">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>


            <br><br>

            <span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

            <br><br>

            <span class="layui-breadcrumb" lay-separator="|">
  <a href="">娱乐</a>
  <a href="">八卦</a>
  <a href="">体育</a>
  <a href="">搞笑</a>
  <a href="">视频</a>
  <a href="">游戏</a>
  <a href="">综艺</a>
</span>

            <br><br>

            <div class="layui-tab" lay-filter="tabDemo" lay-allowClose="true">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="1">标题1</li>
                    <li lay-id="2">标题2</li>
                    <li lay-id="3">标题3</li>
                    <li lay-id="4">标题4</li>
                    <li lay-id="5">标题5</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">1</div>
                    <div class="layui-tab-item">2</div>
                    <div class="layui-tab-item">3</div>
                    <div class="layui-tab-item">4</div>
                    <div class="layui-tab-item">5</div>
                </div>
            </div>

            <button class="layui-btn" onclick="layui.element.tabChange('tabDemo', 3)">手工切换到“标题3”</button>
            <button class="layui-btn"
                    onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab
            </button>
            <button class="layui-btn" onclick="layui.element.tabDelete('tabDemo', 4)">删除“标题4”</button>

            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">标题1</li>
                    <li>标题2</li>
                    <li>标题3</li>
                    <li>标题4</li>
                    <li>标题5</li>
                    <li>标题6</li>
                </ul>
            </div>

            <div class="layui-inline">
                <div class="layui-tab layui-tab-card">
                    <ul class="layui-tab-title">
                        <li class="layui-this">标题一</li>
                        <li>标题2</li>
                        <li>标题3</li>
                        <li>标题4</li>
                        <li>标题5</li>
                        <li>标题6</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form">
                                <select>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-tab-item">2</div>
                        <div class="layui-tab-item">3</div>
                        <div class="layui-tab-item">4</div>
                        <div class="layui-tab-item">5</div>
                        <div class="layui-tab-item">6</div>
                    </div>
                </div>
            </div>

            <div class="layui-tab" lay-filter="test" lay-allowClose="true">
                <ul class="layui-tab-title">
                    <li class="layui-this">标题1</li>
                    <li>标题2</li>
                    <li>标题3</li>
                    <li>标题4</li>
                    <li>标题5</li>
                    <li>标题6</li>
                    <li>标题7</li>
                    <li>标题8</li>
                </ul>
            </div>

        </div>
    </div>
</div>
<script src="./plugins/layui/layui.js"></script>
<script>
  //使用tab的前提是需要加载element模块
  layui.use(['element', 'form'], function(){
    var element = layui.element;

    //tab 监听选项卡切换 Tab选项卡点击切换时触发，回调函数返回一个object参数，携带两个成员
    element.on('tab(test)', function(data){
      console.log(this); //当前Tab标题所在的原始DOM元素
      console.log(data.index); //得到当前Tab的所在下标
      console.log(data.elem); //得到当前的Tab大容器
    });
    //tabDelete 监听选项卡删除  Tab选项卡被删除时触发，回调函数返回一个object参数，携带两个成员：
    element.on('tabDelete(filter)', function(data){
      console.log(this); //当前Tab标题所在的原始DOM元素
      console.log(data.index); //得到当前Tab的所在下标
      console.log(data.elem); //得到当前的Tab大容器
    });

    //nav 监听导航菜单的点击 当点击导航父级菜单和二级菜单时触发，回调函数返回所点击的菜单DOM对象：
    element.on('nav(test)', function(elem){
      console.log(elem) //得到当前点击的DOM对象
    });
    //collapse 监听折叠面板
    element.on('collapse(test)', function(data){
      console.log(data.show); //得到当前面板的展开状态，true或者false
      console.log(data.title); //得到当前点击面板的标题区域DOM对象
      console.log(data.content); //得到当前点击面板的内容区域DOM对象
    });
  });
</script>

</body>
</html>